<template>
  <div ref="gradientsBar"></div>
</template>

<script>
import resize from '@/mixins/resize'
import * as echarts from 'echarts'
import { countCourse } from '@/api/config'
export default {
  name: 'gradientsBar',
  mixins: [resize],
  data () {
    return {
      courseStatus: { 'RECRUITING': 0, 'COMPLETED': 0, 'CANCELLED': 0 }
    }
  },
  async mounted () {
    await this.getCount()
    this.$nextTick(() => {
      this.initEchart()
    })
  },
  methods: {
    // 课程概况
    async getCount () {
      let params = { operate: 'manage' }
      let res = await countCourse(params)
      res.data.map(t => {
        this.courseStatus[t.key] = t.value
      })
    },
    initEchart () {
      this.myChart = echarts.init(this.$refs.gradientsBar)
      this.myChart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            padding: [5, 10]
          },
          grid: {
            left: 50,
            right: 20,
            bottom: 40,
            top: 30
          },
          xAxis: [
            {
              type: 'category',
              data: ['招募中', '已完成', '已取消'],
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4'
                }
              },
              axisLabel: {
                color: '#B4B4B4'
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4'
                }
              },
              axisLabel: {
                color: '#B4B4B4'
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [this.courseStatus['RECRUITING'], this.courseStatus['COMPLETED'], this.courseStatus['CANCELLED']],
              barWidth: '20',
              barGap: '80%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#5171fd'
                    },
                    {
                      offset: 1,
                      color: '#c97afd'
                    }
                  ])
                }
              }
            }
          ]
        },
        true
      )
    }
  }
}
</script>
